<template lang="pug">
  el-dialog(
    title="添加回款记录"
    width="640px"
    :visible="visibleDialog"
    center
    v-el-drag-dialog
    append-to-body
    destroy-on-close
    @close="$_handleCancel"
  )
    alert.backDetail(type="info")
      h2
        small 合同金额：
        span.ml5.c_error ￥{{info.totalAmount | toThousandFilter}}
      el-row(:gutter="24")
        el-col(:span="12")
          p 已回款：￥{{info.practicalAmount | toThousandFilter}}
        el-col(:span="12")
          p.tr.c_warning 待回款：￥{{allBackMoney | toThousandFilter}}
    form-box.mt16(
      :fields="fields"
      labelWidth="136px"
      :layoutCol="{ xs: 24, md: 24, lg: 24}"
      :submitting="submitting"
      :submitHandle="submitHandle"
      @cancelHandle="$_handleCancel"
    )
      template(slot="form-backMoney")
        el-input(placeholder="请输入内容" v-model="backMoney" @change="e => validateMoney(e)")
          el-button(slot="append" type="primary" @click="backMoney = allBackMoney") 补齐金额
</template>
<script>
import Alert from '@/components/Basic/Alert'
import elDragDialog from '@/directive/el-drag-dialog'
import { contractBackMoney } from '../api'

const moneyReg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/

export default {
  components: {
    Alert
  },
  directives: { elDragDialog },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    },
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      submitting: false,
      backMoney: 0
    }
  },
  computed: {
    // 通过计算属性，对.sync进行转换，外部也可以直接使用visible.sync
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    allBackMoney () {
      const { info } = this
      return info.totalAmount - info.practicalAmount
    },
    fields () {
      return [
        {
          key: 'backMoney',
          label: '本次回款金额',
          type: 'slot'
        },
        {
          key: 'content',
          label: '备注',
          type: 'textarea',
          rules: [{ required: true, message: '请输入备注' }]
        }
      ]
    }
  },
  methods: {
    // 校验金额
    validateMoney (value) {
      console.log(value)
      if (!moneyReg.test(value)) {
        this.$message.error('请输入大于0的数字!')
        this.backMoney = parseFloat(value) || 0
        return
      }
      if (parseFloat(value) > parseFloat(this.allBackMoney)) {
        this.$message.error('补款金额不能大于待补款金额')
        this.backMoney = this.allBackMoney
      }
    },
    submitHandle (values) {
      const { backMoney, id } = this
      console.log(values)
      this.submitting = true
      contractBackMoney({
        ...values,
        backMoney,
        contractId: id
      }).then(() => {
        this.$message.success('添加回款成功')
        this.$emit('getInfo')
        this.$_handleCancel()
      }).finally(() => {
        this.submitting = false
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.backDetail{
  h2 {
    margin-top: 0;
    margin-bottom: 5px;

    small {
      font-size: 14px;
      font-weight: normal;
    }
  }
}
</style>
